{% extends 'xBlog/base.html' %}
{% load xBlog_filter %}
{% block title %}{{ article.title }}{% endblock %}
{% block content %}
    <div id="comment-modal" class="modal hide fade">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">&times;</a>
            <h4>发表评论</h4>
        </div>
        <div class="modal-body">
            <div class="hide" align="center" id="tip">
                <h2>亲~ 评论内容是必须的哟! o(∩_∩)o</h2>
            </div>
            <small class="pull-right"><a href="javascript:void(0)" id="show-visitor-profile">填写可选个人信息>></a></small>
            <div class="hide" id="visitor-profile">
                <p>昵称<input type="text" name="nickname" id="nickname" maxlength=10 style="width:97%;"></p>

                <p>邮箱<input type="email" name="email" id="email" maxlength=30 style="width:97%;"></p>

                <p>主页<input type="url" name="url" id="url" maxlength=50 style="width:97%;"></p>
            </div>
            <p>评论<textarea required style="width:97%;" rows="5" id="comment-content"></textarea></p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">关闭</a>
            <button class="btn btn-primary" id="cbtn" onclick="comment('{{ article.id }}')">评论
            </button>
        </div>
    </div><!--comment form-->

    <div class="well">
        <div>
            <h2>{{ article.title }}<span class="pull-right"
                                         style="font-size:16px;font-weight:bolder;padding-top:7px;">{{ article.date_time|date:"Y-m-d H:i" }}</span>
            </h2>
        </div><!--title-->
        <div style="word-wrap:break-word;">
            <div id="idcontent">
                {{ article.content|custom_markdown }}
            </div>


            <div class="row-fluid" style="margin-top: 60px;">
                <div>
                    <p>
                        如果您觉得从我的分享中得到了帮助，并且希望我的博客持续发展下去，请点击<a href="/alipay" target="_blank"><img
                            src="/static/xBlog/img/donate_me.png" alt="支付宝捐赠" width="110"/></a>，谢谢！
                    </p>

                    <p>若非特别声明，文章均为<a href="http://weibo.com/minisnakeashin" target="_blank">大鹌鹑</a>的个人笔记，转载请注明<a
                            href="/article/203/" target="_blank">出处</a>。文章如有侵权内容，请联系我，我会及时删除。
                    </p>
                </div>
            </div>

        </div><!--content-->
        <div class="row-fluid" style="margin-top:20px;">
            {% if article.catagory %}
                <span class="label label-inverse">
                    <a href="{% url 'catagories' catagory_name=article.catagory.catagory_name %}"
                       title="{{ article.catagory.catagory_name }}分类文章">#{{ article.catagory.catagory_name }}#</a> </span>
            {% endif %}

            <span>&nbsp;&nbsp;</span>
            {% if article.tags.all %}
                {% for tag in article.tags.all %}
                    <span class="label label-inverse">
                    <a href="{% url 'tags' tag_name=tag.tag_name %}"
                       title="{{ tag.tag_name }}分类文章">#{{ tag.tag_name }}#</a></span>
                {% endfor %}
            {% endif %}


            <span class="pull-right">
                    <!-- JiaThis Button BEGIN -->
                    <div class="jiathis_style" style="float:right; margin-left:15px;margin-top:2px;">
                        <span class="jiathis_txt">分享到：</span>
                        <a class="jiathis_button_qzone"></a>
                        <a class="jiathis_button_tsina"></a>
                        <a class="jiathis_button_tqq"></a>
                        <a class="jiathis_button_weixin"></a>
                        <a class="jiathis_button_renren"></a>
                        <a href="http://www.jiathis.com/share?uid=2090175"
                           class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
                        <a class="jiathis_counter_style"></a>
                    </div>
                    <script type="text/javascript">
                        var jiathis_config = {data_track_clickback: 'true'};
                    </script>
                    <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=2090175"
                            charset="utf-8"></script>
                <!-- JiaThis Button END -->

                    阅读[{{ article.visit_count }}]
                    <a data-toggle="modal" href="#comment-modal" title="点击评论文章" style="margin-left:15px;"
                       class="clear-form">评论[<span id="comment-count">{{ article.comment_set.all|length }}</span>]</a>
                </span>
        </div><!--infos-->

        <hr>

        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                    {% if previous %}
                        <small>上一篇:<a title="点击阅读详细内容"
                                      href="{% url 'detail' article_id=previous.id %}">{{ previous.title }}</a></small>
                    {% else %}
                        <small>上一篇:<a title="没啦" href="javascript:void(0)">没有啦</a></small>
                    {% endif %}
                </div>
                <div class="offset4 span4" align="right">
                    {% if next %}
                        <small>下一篇:<a title="点击阅读详细内容" href="{% url 'detail' article_id=next.id %}">{{ next.title }}</a>
                        </small>
                    {% else %}
                        <small>下一篇:<a title="没啦" href="javascript:void(0)">没有啦</a></small>
                    {% endif %}
                </div>
            </div>
        </div>

        {% if suggest %}
            <div>
                <h4>你可能也感兴趣的文章推荐</h4>

                <div class="row-fluid">
                    <div class="span12 alert">
                        {% for article in suggest %}
                            <div class="span3"><a href="{% url 'detail' article_id=article.id %}" title="点击阅读详细内容"
                                                  target="_blank">{{ article.title }}</a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endif %}
        <!--recommend-->
    </div><!--article-->

    <!---->
    <div class="well">
        <h4 id="comments">本文最近访客</h4>

        <div class="row-fluid">
            {% for record in records %}
                <blockquote class="span3"><a href="{{ record.visitor|get_visitor_url }}" target="_blank"
                                             title="访问TA的个人主页">
                    {{ record.visitor.nickname }}{{ record.visitor.ip_address|ip_protect }}[{{ record.visitor.city }}]</a>
                    <small>{{ record.date_time|date:"Y-m-d H:i" }}</small>
                </blockquote>
            {% endfor %}
        </div><!--visitor-->

        <h4 align="right"><a data-toggle="modal" href="#comment-modal" title="发表评论"
                             class="clear-form btn btn-mini btn-primary">发表评论</a></h4>

        <div class="row-fluid" id="comment-list">
            {% for comment in article.comment_set.all %}
                <div class="comment" id="{{ forloop.counter }}">
                    <div style="min-height: 50px;">
                        <div style="float: left; display: inline-block; width: 7%;">
                            <small>#{{ forloop.counter }}</small>
                            <img src="{{ comment.visitor.email|gravatar }}" width=50>
                        </div>
                        <div style="display: inline-block; width: 91%;">
                            <a href="{{ comment.visitor|get_visitor_url }}" target="_blank">
                                {{ comment.visitor.nickname }}{{ comment.visitor.ip_address|ip_protect }}[{{ comment.visitor.city }}]
                            </a>
                            <span class="hide">{{ comment.id }}</span>
                            {% if comment.reply_to_who_id %}
                                <a href="#{{ comment.reply_to_who_id.comment_id }}" class="reply-to"
                                   onclick="hightlight('{{ comment.reply_to_who_id.comment_id }}')">回复
                                    #{{ comment.reply_to_who_id.comment_id }}{{ comment.reply_to_who_id.visitor.nickname }}{{ comment.reply_to_who_id.visitor.ip_address|ip_protect }}[{{ comment.reply_to_who_id.visitor.city }}]</a>
                            {% endif %}
                            :
                            <div style="word-break: break-word;">{{ comment.content }}</div>
                        </div>
                    </div>
                    <div style="margin-top: 10px;">
                        <small>{{ comment.submit_time|date:"Y-m-d H:i" }}</small>
                        <small class="pull-right reply-button"><a data-toggle="modal" href="#comment-modal"
                                                                  title="回复该条评论">回复</a></small>
                    </div>
                </div>
            {% endfor %}
            <div id="comment-bottom"></div>
        </div><!--comment-->
    </div>


    <script>
        $('#sitename').addClass('animated lightSpeedIn');
        if (!$(this).has('object').length {#  && !$(this).has('iframe').length#}) {
            $('#idcontent').addClass('animated wobble');
        }
    </script>

{% endblock %}

